<template>
    <div class='banner'>
        <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="handlerClose" :close-on-click-modal="false">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="文章标题" :label-width="formLabelWidth" prop="article_title">
                    <el-input v-model='form.article_title' placeholder="文章标题"></el-input>
                </el-form-item>
                <el-form-item label="文章内容" :label-width="formLabelWidth" prop="article_content">
                    <el-input type="textarea" v-model='form.article_content' placeholder="文章内容"></el-input>
                </el-form-item>
                <el-form-item label="文章类型" prop="typename">
                    <el-select v-model="form.typename" placeholder="请选择文章类型">
                        <el-option v-for="item in dynamicTags" :key="item.id" :label="item.typename"
                            :value="item.typename"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上传图片" :label-width="formLabelWidth">
                    <el-upload class="upload-demo" :http-request="httpRequest" :action="actionUrl" :limit="1" ref="upload"
                        :auto-upload="false" :file-list="fileList" :data="form" :on-exceed="handleExceed"
                        :on-remove="handleRemove" :on-change="handlerChange">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitUpload">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'banner-page',
    data() {
        return {
            dialogFormVisible: true,
            form: {},
            fileList: [],
            title: '新增图片',
            formLabelWidth: '80px',
            submit: false,
            haveImg: false,
            actionUrl: '',
            url: {
                update: '/article/update',
                edit: '/article/edit',
                add: '/article/add',
                type: '/article/type'
            },
            rules: {
                article_title: [
                    { required: true, message: '请输入文章标题', trigger: 'blur' },
                ],
                article_content: [
                    { required: true, message: '请输入文章内容', trigger: 'blur' },
                ],
                typename: [
                    { required: true, message: '请选择文章类型', trigger: 'blur' },
                ]
            },
            dynamicTags: []
        }
    },
    created() {
        this.getTypeList()
    },
    methods: {
        //获取文章类型
        getTypeList() {
            this.$http.get(this.url.type).then(res => {
                console.log(res);
                if (res.status == 200) {
                    this.dynamicTags = res.data.results
                }
            })
        },
        open(row) {
            if (row) {
                this.title = '修改图片'
                this.form = Object.assign({}, row)
            }
            this.dialogFormVisible = true
        },
        //确定提交
        submitUpload() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    if (this.form.id && !this.haveImg) {
                        this.$http.post(this.url.update, this.form).then(res => {
                            if (res.status === 200) {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                this.submit = true
                                this.dialogFormVisible = false
                            }
                        })
                    } else {
                        if (!this.haveImg) {
                            this.$message({
                                message: '未选择图片',
                            });
                        }
                        this.$refs.upload.submit();
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        httpRequest(params) {
            // 上传新文件时，将进度条值置为零
            const file = params.file
            this.forms = new FormData() // 实例化一个formData，用来做文件上传
            this.forms.append('file', file)
            this.forms.append('article_title', this.form.article_title)
            this.forms.append('article_content', this.form.article_content)
            this.forms.append('typename', this.form.typename)
            let url = this.form.id ? this.url.edit + '/' + this.form.id : this.url.add
            this.$http.post(url, this.forms).then(res => {
                console.log(res)
                if (res.status === 200) {
                    this.$message({
                        message: this.title + '成功',
                        type: 'success'
                    });
                    this.submit = true
                    this.dialogFormVisible = false
                }
            })
        },
        //控制图片上传数量
        handleExceed() {
            this.$message({
                showClose: true,
                message: '每次只允许上传一张图片',
                type: 'warning'
            });
        },
        //监听弹出框关闭
        handlerClose() {
            this.$emit('close', this.submit)
        },
        //移除图片
        handleRemove(file, fileList) {
            this.haveImg = false
            console.log(11, file, fileList);
        },
        //添加图片
        handlerChange(file, fileList) {
            this.haveImg = true
            console.log(22, file, fileList);
        }
    }
}
</script>

<style scoped lang='less'></style>